import { Menu, Item, Separator, Submenu, useContextMenu, ItemParams } from 'react-contexify';
import 'react-contexify/ReactContexify.css';

export const MENU_ID = 'editor_contexify';

export interface ContexifyProps {
  copyCard: (params: ItemParams) => void
  deleteCard: (params: ItemParams) => void
  changeZIndex: (params: ItemParams, addZIndex: number) => void
  selectParent: (params: ItemParams) => void
}

export default function Contexify({ copyCard, deleteCard, changeZIndex, selectParent }: ContexifyProps) {

  const handleItemClick = (params: ItemParams) => {
    const { id } = params;
    switch (id) {
      case "copy":
        copyCard(params);
        break;
      case "delete":
        deleteCard(params);
        break;
      case "addZIndex":
        changeZIndex(params, 1);
        break;
      case "delZIndex":
        changeZIndex(params, -1);
        break;
      case "selectParent":
        selectParent(params);
        break;
    }
  }


  return (
    <Menu id={MENU_ID}>
      <Item id="copy" onClick={handleItemClick}>复制</Item>
      <Item id="delete" onClick={handleItemClick}>删除</Item>
      <Separator />
      <Item id="addZIndex" onClick={handleItemClick}>上移一层</Item>
      <Item id="delZIndex" onClick={handleItemClick}>下移一层</Item>
      <Separator />
      <Item id="selectParent" onClick={handleItemClick}>选中父级容器</Item>
      <Separator />
      <Item disabled={false}>关闭</Item>
      {/* <Separator /> */}
      {/* <Submenu label="Foobar">
        <Item id="reload" onClick={handleItemClick}>Reload</Item>
        <Item id="something" onClick={handleItemClick}>Do something else</Item>
      </Submenu> */}
    </Menu>
  );
}